<template>
	<view class="page-photo-print-detail">
		<view class="top-banner" >
			<image src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/photo/print/zjzdy.png" mode="widthFix"
				></image>
			<text class="price">
				<text class="price-num">
					{{printService.discount}}
				</text>
				<text>元/版</text>
			</text>
		</view>
		<view class="title flex-start-center">
			<image class="item-icon" src="/static/print/phot-size.png" mode="widthFix"></image>
			<text>照片尺寸</text>
		</view>
		<view class="choose-list">
			<view :class="['choose-item', {active: item.id === activeSize}]" v-for="item in sizeList" :key="item.id"
				@tap="onClickSizeItem(item)">
				{{item.name}}
			</view>
		</view>
		<view class="title flex-start-center">
			<image class="item-icon" src="/static/print/package-select.png" mode="widthFix"></image>
			<text>选择套餐</text>
		</view>
		<view class="choose-list">
			<view :class="['choose-item', 'width-100', {active: item.background === activeColor}]"
				v-for="item in backColorList" :key="item.id" @tap="onClickColor(item)">
				{{item.text}}
			</view>
		</view>
		<view class="fixed-bottom-btn back-gray">
			<view class="custom-button full-button" @tap="onSubmit">
				<u-button type="primary" shape="circle" text="下一步"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		backColorList,
		sizeList,
	} from '@/common/js/data.js';
	import {
		queryPackageApi,
	} from '@/common/js/method.js';

	const activeSize = ref(1);
	const activeColor = ref('#FFFFFF');
	const printService = ref({});

	const onClickSizeItem = (item) => {
		activeSize.value = item.id;
	};
	const onClickColor = (item) => {
		activeColor.value = item.background;
	};
	// 查询套餐
	const getPackageInfo = async () => {
		// 套餐类型，1-充值套餐，2-保存电子照套餐，3-冲印邮寄套餐，4-快递方式套餐 5-照片剪辑套餐，6-换底色套餐，7-黑白上色套餐，8-漫画照套餐，9-素描化套餐，10-画质增强套餐，11-证件照打印，12-生活照打印
		let res = await queryPackageApi([11])
		printService.value = res[0].data.packageList[0];
	}
	const onSubmit = () => {

		const data = {
			id: activeSize.value,
			background: activeColor.value,
		};
		uni.navigateTo({
			url: `/pages/make-photo/make-photo?type=photo-print-credit&data=${JSON.stringify(data)}`
		})
	};
	getPackageInfo();
</script>


<style lang="scss" scoped>
	.page-photo-print-detail {
		min-height: 100vh;
		box-sizing: border-box;
		background: rgba(245, 245, 245, 1);
		padding: 20rpx 32rpx 280rpx 32rpx;
		display: flex;
		flex-direction: column;
		gap: 40rpx;

		.top-banner {
			position: relative;
			width: 100%;
			height: 386rpx;
			border-radius: 16rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
			.price {
				position: absolute;
				bottom: 16rpx;
				right: 32rpx;
				/** 文本2 */
				font-size: 28rpx;
				line-height: 1;
				color: rgba(212, 48, 48, 1);
				.price-num {
					/** 文本1 */
					font-size: 48rpx;
					font-weight: 700;
					line-height: 56rpx;
				}	
			
			}
		}

		.item-icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		.choose-list {
			display: flex;
			flex-wrap: wrap;
			gap: 40rpx;

			.choose-item {
				width: 140rpx;
				border-radius: 8rpx;
				border: 2rpx solid rgba(229, 229, 229, 1);
				box-sizing: border-box;
				background-color: #fff;
				font-size: 28rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgba(56, 56, 56, 1);

				&.width-100 {
					width: 200rpx;
				}

				&.active {
					color: rgba(69, 144, 229, 1);
					border: 4rpx solid rgba(69, 144, 229, 1);
				}
			}
		}
	}
</style>